<template>
    <div>
        <div class="main">
            <div class="outer">
                <div class="inner">
                    <div class="head">
                        <h4>全新服务体验</h4>
                        <p>
                            我们拥有丰富的互联网从业经验，为您提供专业级的技术服务
                        </p>
                    </div>
                    <div class="content">
                        <div class="web-site">
                            <div class="img-box">
                                <img src="../../../assets/aboutImg/web_design.png" alt="">
                            </div>
                            <ul class="content-text">
                                <li>网站设计</li>
                                <li>Website development</li>
                                <li>购物、企业网站开发</li>
                            </ul>
                        </div>
                        <div class="vx">
                            <div class="img-box">
                                <img src="../../../assets/aboutImg/application.png" alt="">
                            </div>
                            <ul class="content-text">
                                <li>微信应用</li>
                                <li>Wexin application</li>
                                <li>H5推广、宣传页、小程序、商城</li>
                            </ul>
                        </div>
                        <div class="management">
                            <div class="img-box">
                                <img src="../../../assets/aboutImg/system.png" alt="" >
                            </div>
                            <ul class="content-text">
                                <li>管理系统开发</li>
                                <li>management</li>
                                <li>库存、销售管理、办公系统</li>
                            </ul>
                        </div>
                        <div class="app">
                            <div class="img-box">
                                <img src="../../../assets/aboutImg/app.png" alt="" style="margin-left: 23px">
                            </div>
                            <ul class="content-text">
                                <li>APP 开发</li>
                                <li>App development</li>
                                <li>游戏、社交应用、购物支付</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "service",

    }
</script>

<style scoped lang="less">
    .content>div {
        max-width: 25%;
        -webkit-box-flex: 0;
        flex: 0 0 25%;
        margin-top: 40px;
        display: block;
        min-height: 1px;
        padding-left: 5px;
        padding-right: 5px;
        box-sizing: border-box;
    }
.main {
    width: 100%;
    height: 352px;
    background: url("../../../assets/aboutImg/service_bg.jpg") fixed;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    .outer{
        width: 100%;
        background: rgba(0,0,0,.1);
        height: 352px;
        .inner{
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
            width: 1170px;
            .head {
                text-align: center;
                color: #fff;
                font-size: 14px;
                h4{
                    width: 85px;
                    font-family: 微软雅黑;
                    font-weight: 500;
                    margin: auto;
                    padding: 20px 0px 10px;
                    border-bottom: 2px solid rgb(255, 255, 255);
                    box-sizing: border-box;
                }
                p {
                    margin-top: 10px;
                    display: block;
                    margin-block-start: 1em;
                    margin-block-end: 1em;
                    margin-inline-start: 0px;
                    margin-inline-end: 0px;
                }
            }
            .content{
                margin-left: -5px;
                margin-right: -5px;
                margin-top: -10px;
                display: flex;
                flex-wrap: wrap;
                box-sizing: border-box;
                .img-box {
                    position: relative;
                    width: 70px;
                    height: 70px;
                    margin: 0 auto;
                    border-radius: 50%;
                    background: #323f48;
                    padding: 15px;
                    img {
                        width: 35px;
                        height: 35px;
                        margin: 18px;
                        border: none;
                    }
                }
                .img-box:hover {
                    /*to do*/
                    background-color: #007fff;
                    img {

                    }
                }
                ul {
                    color: #fff;
                    margin-top: 10px;
                    text-align: center;
                    font-size: 14px;
                    li {
                        padding: 2px 0;
                        box-sizing: border-box;
                    }
                }
                .vx{
                    img {
                        width: 27px;
                        height: 40px;
                        margin: 15px 0 0 23px;
                    }
                }
            }
        }
    }
}
.img-box{
    position: relative;
}

.img-box:hover::after{
    content: "";
    position: absolute;
    top: -7px;
    left: -7px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px solid #007fff;
}

</style>